import MapSearchKeyword, { PositionType } from '@/components/map-search-keyword';
import { LanguageTypeString, QuestionType } from '@/components/question/typing';
import { Divider, Input, Modal, Space } from 'ant-design-vue';
import { defineComponent, PropType, ref } from 'vue';
import CommonAttributeComponent from '../common-attribute-component';
import CommonSettingButtons from '../common-setting-buttons';
import './style.css';

export default defineComponent({
  props: {
    question: {
      type: Object as PropType<QuestionType>,
      required: true,
    },
    language: {
      type: String as PropType<LanguageTypeString>,
      required: true,
    },
  },
  setup(props) {
    const { language, question } = props;
    const questionProper =
      language === 'zh' ? question.questionProperZh : question.questionProperEn;
    const searchKey = ref(questionProper?.mapItem?.searchKey);
    const position = ref<PositionType>({
      longitude: questionProper?.mapItem?.longitude,
      latitude: questionProper?.mapItem?.latitude,
    });

    const isShowSearchMap = ref<boolean>(false);
    const showSearchMapModal = () => {
      isShowSearchMap.value = true;
    };

    const saveMapCenterLocation = () => {
      if (questionProper?.mapItem) {
        questionProper.mapItem.searchKey = searchKey.value;
        questionProper.mapItem.longitude = position.value.longitude;
        questionProper.mapItem.latitude = position.value.latitude;
      }

      isShowSearchMap.value = false;
    };

    return () => {
      return (
        <>
          <CommonAttributeComponent question={question} language={language} />
          <Divider plain={true}>地图中心位置</Divider>

          <div class="map-attribute-design-item-container">
            <Input v-model:value={searchKey.value} readonly>
              {{
                addonBefore: () => '位置关键字:',
              }}
            </Input>
          </div>
          <div class="map-attribute-design-item-container">
            <Input
              v-model:value={position.value.longitude}
              style="width: 48%;margin-right:16px"
              readonly
            >
              {{
                addonBefore: () => '经度:',
              }}
            </Input>
            <Input v-model:value={position.value.latitude} style="width: 48%;" readonly>
              {{
                addonBefore: () => '纬度:',
              }}
            </Input>
          </div>
          <div style="text-align:center">
            <Space>
              <a onClick={() => showSearchMapModal()}>设置地图位置</a>
              <CommonSettingButtons question={question} />
            </Space>
          </div>
          <Modal
            key={`map-question-attribute-modal-${question.id}`}
            v-model:open={isShowSearchMap.value}
            title="查询位置信息"
            style="width:90%;"
            destroyOnClose={true}
            forceRender={true}
            onOk={saveMapCenterLocation}
          >
            <MapSearchKeyword
              key={`map-question-attribute-modal-map-search-keyword-${question.id}`}
              questionId={question.id}
              v-model:keyword={searchKey.value}
              v-model:position={position.value}
            />
          </Modal>
        </>
      );
    };
  },
});
